<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>密保问题管理</title>
<%-- 全站样式 --%>
<jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>

<style>
#add-btn a {
    background: #f8f8f8;
    width: 15%;
    height: auto;
    font-size: 20px;
}

#add-btn a:hover {
    border: 0px;
}

#add-btn a:link {
    border: 0px;
}

tr, th, td {
    text-align: center;
}
</style>
</head>

<body class="page-body skin-navy">
    <!-- 显示错误信息 -->
    <c:if test="${!empty message }">
        <script type="text/javascript">
            alert("${message}");
        </script>
    </c:if>
    
    <div class="page-container">
        <%--侧边栏 --%>
        <jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>

        <div class="main-content">
            <%--导航 --%>
            <jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>
            <input type="hidden" id="baseUrl"
                value="${pageContext.request.contextPath}">
            <div class="page-title">
                <div class="title-env">
                    <h1 class="title">密保问题管理</h1>
                    <p class="description">您可以在此页面上添加和查看密保问题。</p>
                </div>
                <div class="col-md-offset-10" id="add-btn">
                    <a href="javascript:;"
                        onclick="jQuery('#add').modal('show', {backdrop: 'fade'});"
                        class="btn btn-default btn-block btn-group-lg"> <i
                        class="Example of hand-o-right fa-hand-o-right"></i>添加密保
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-default panel-tabs">
                    <!-- Add class "collapsed" to minimize the panel -->
                    <div class="panel-heading">
                        <h3 class="panel-title">密保问题列表</h3>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_user">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th>密保问题编号</th>
                                                    <th>密保问题</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody class="middle-align" id="middle-align">
                                                <c:forEach items="${datas }" var="data">
                                                    <tr>
                                                        <td>${data['id'] }</td>
                                                        <td>${data['question'] }</td>
                                                        <td>
                                                            <button
                                                                class="btn btn-info btn-sm btn-icon icon-left btn-default"
                                                                onClick="article_del(this)" name="${data['id'] }">删除
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </c:forEach>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <%--页脚 --%>
            <jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
        </div>
    </div>
    <script type="text/javascript">
    function article_del(obj){
        var id=$(obj).attr("name");
        
        var res = confirm('确认要删除吗？');
        if(res == true)
        {
            
            $.post($("#baseUrl").val() + "/deleteQuestion.do",
                      {
                        id: id
                      },
                      function(data){
                          var msg = data.question_msg;
                            if (msg == "success"){
                                
                                $(obj).parents("tr").remove();
                                return true;
                            } else {
                                alert("无法删除，有用户使用该密保问题");
                                return false;
                            }
                      });
        }                       
    }
</script>
    <div class="page-loading-overlay">
        <div class="loader-2"></div>
    </div>
    <div class="modal fade bs-example-modal-sm" id="add">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                    <h4 class="modal-title">添加密保问题</h4>
                </div>

                <div class="modal-body">
                    <form action="<c:url value='/addQuestion.do'/>" method="post" name="submitForm" onsubmit="submit();">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="field-1" class="control-label">密保问题</label> <input
                                    type="text" class="form-control" id="question"
                                    placeholder="请输入密保问题" require="required" name="question" />
                            </div>
                            <span id="msg" style="color:red;"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-white" data-dismiss="modal"
                            onclick="addQuestion();">
                    </div>
                </div>
                </form>
            </div>
        </div>

        <%-- 尾部内容 --%>
        <jsp:include page="/WEB-INF/jsps/template_tail.jsp" />

        <!-- Imported styles on this page -->
        <link rel="stylesheet"
            href="assets/js/datatables/dataTables.bootstrap.css">
        <!-- Imported scripts on this page -->
        <script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
        <script src="assets/js/datatables/dataTables.bootstrap.js"></script>
        <script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
        <!--Specific JS for this page-->
        <script type="text/javascript">
            $("#question").blur(function(){
                var question= $.trim($('#question').val());
                var span = $("#msg");
                span.html("");
                if(question.length==0){
                    span.html("密保问题不能为空");
                }
            }
            );
            function submitForm(){
                
                var question= $.trim($('#question').val());
                
                if(question.length==0){
                    alert("密保问题不能为空");
                    return false;                   
                }
                
                return true;
            }
            function addQuestion(){
                if(submitForm()){
                    
                    document.submitForm.submit();
                }
            }
        </script>
        <script type="text/javascript">
        
        jQuery(document).ready(function($) {
            $("#example-1").dataTable({
                aLengthMenu: [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "所有"]
                ]
            });
            $("#example-2").dataTable({
                aLengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ]
            });
            // Replace checkboxes when they appear
            var $state = $("#example-2 thead input[type='checkbox']");
    
            $("#example-2").on('draw.dt', function() {
                cbr_replace();
    
                $state.trigger('change');
            });
    
            // Script to select all checkboxes
            $state.on('change', function(ev) {
                var $chcks = $("#example-2 tbody input[type='checkbox']");
    
                if($state.is(':checked')) {
                    $chcks.prop('checked', true).trigger('change');
                } else {
                    $chcks.prop('checked', false).trigger('change');
                }
            });
    
</script>
</body>

</html>